<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4965369" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">个人</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">offical</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">录音</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">竖屏</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">icon_横屏切换_横屏切换</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">like_filled</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">star_filled</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">message_unread</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">举报</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">安全保障</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">消息-置灰</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">首页-置灰</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">个人中心-置灰</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">看点-置灰</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">快捷支付</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">支付订金</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">开通服务</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">签署协议</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">关注-置灰</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">提交验资</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">定位 2</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">转入资金</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">验资完成</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">在线验资</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">上传图片</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">在线选房</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">填选购人</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">分享 2</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">保护号码</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">专属顾问</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">进入</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">床</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">停车场</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">休息室</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">衣柜</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">休闲区</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">书桌</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">智能门锁</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">宽带</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">前台</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">书吧</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">洗衣房</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">空中花园</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">电视机</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">微波炉</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">电梯</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">天然气</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">电磁炉</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">热水器</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">安全监控</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">DIY餐吧</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">橱柜</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">地铁</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">影音区</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">餐桌</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">抽油烟机</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">空调</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">桌球区</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">暖气</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">沙发</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">健身房</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">便利店</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">会客区</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">24H安保</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">社区活动</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">冰箱</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">洗衣机</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">pause circle</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">参数</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">多语言</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">模块</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">问号-圆圈</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">错误-圆圈</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">成员</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">减去</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">文件夹-打开</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">闭眼</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">创建对话</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">超级计算</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">问好</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">高级功能</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">超算实例</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">分布式</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">减少-圆圈</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">防护效果验证</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">定制裸金属</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">网络</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">附件</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">剪刀</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">切换 2</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">服务</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">防护记录</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">发送 2</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">人员、账号管理</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">模型仓库</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">切换表格</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">计费说明</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">人员管理</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">模型微调</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">扫描</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">省略号</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">费用</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">添加-圆圈</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">排序</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">拍照</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">数据集</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">漏斗</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">开发机</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">实例</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">钉</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">通知 2</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">模型服务</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">裸金属</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">训练任务</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">使用手册</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">通用计算</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">右侧</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">外链</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">模型训练</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">多端切换</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">切换卡片</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">模型工具</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">营销中心</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">流量调度</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">配额</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">算力运营</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">超算协同</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">云硬盘</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">数据工具</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">图形桌面</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1753928923166') format('woff2'),
       url('iconfont.woff?t=1753928923166') format('woff'),
       url('iconfont.ttf?t=1753928923166') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-geren"></span>
            <div class="name">
              个人
            </div>
            <div class="code-name">.icon-geren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-offical"></span>
            <div class="name">
              offical
            </div>
            <div class="code-name">.icon-offical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luyin"></span>
            <div class="name">
              录音
            </div>
            <div class="code-name">.icon-luyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuping"></span>
            <div class="name">
              竖屏
            </div>
            <div class="code-name">.icon-shuping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_hengpingqiehuan_hengpingqiehuan"></span>
            <div class="name">
              icon_横屏切换_横屏切换
            </div>
            <div class="code-name">.icon-icon_hengpingqiehuan_hengpingqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test5"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-icon-test5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test6"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-icon-test6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test7"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-icon-test7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test8"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.icon-icon-test8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test9"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-icon-test9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test10"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-icon-test10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test11"></span>
            <div class="name">
              like_filled
            </div>
            <div class="code-name">.icon-icon-test11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test12"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-icon-test12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test13"></span>
            <div class="name">
              star_filled
            </div>
            <div class="code-name">.icon-icon-test13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test1"></span>
            <div class="name">
              message_unread
            </div>
            <div class="code-name">.icon-icon-test1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test2"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-icon-test2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test3"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-icon-test3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-test4"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-icon-test4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jubao"></span>
            <div class="name">
              举报
            </div>
            <div class="code-name">.icon-jubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanbaozhang"></span>
            <div class="name">
              安全保障
            </div>
            <div class="code-name">.icon-anquanbaozhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi-zhihui"></span>
            <div class="name">
              消息-置灰
            </div>
            <div class="code-name">.icon-xiaoxi-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye-zhihui"></span>
            <div class="name">
              首页-置灰
            </div>
            <div class="code-name">.icon-shouye-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin-zhihui"></span>
            <div class="name">
              个人中心-置灰
            </div>
            <div class="code-name">.icon-gerenzhongxin-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kandian-zhihui"></span>
            <div class="name">
              看点-置灰
            </div>
            <div class="code-name">.icon-kandian-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaijiezhifu"></span>
            <div class="name">
              快捷支付
            </div>
            <div class="code-name">.icon-kuaijiezhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhifudingjin"></span>
            <div class="name">
              支付订金
            </div>
            <div class="code-name">.icon-zhifudingjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaitongfuwu"></span>
            <div class="name">
              开通服务
            </div>
            <div class="code-name">.icon-kaitongfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianshuxieyi"></span>
            <div class="name">
              签署协议
            </div>
            <div class="code-name">.icon-qianshuxieyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-dianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanzhu-zhihui"></span>
            <div class="name">
              关注-置灰
            </div>
            <div class="code-name">.icon-guanzhu-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tijiaoyanzi"></span>
            <div class="name">
              提交验资
            </div>
            <div class="code-name">.icon-tijiaoyanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-dingwei2"></span>
            <div class="name">
              定位 2
            </div>
            <div class="code-name">.icon-a-dingwei2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanruzijin"></span>
            <div class="name">
              转入资金
            </div>
            <div class="code-name">.icon-zhuanruzijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanziwancheng"></span>
            <div class="name">
              验资完成
            </div>
            <div class="code-name">.icon-yanziwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang1"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixianyanzi"></span>
            <div class="name">
              在线验资
            </div>
            <div class="code-name">.icon-zaixianyanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuantupian"></span>
            <div class="name">
              上传图片
            </div>
            <div class="code-name">.icon-shangchuantupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixianxuanfang"></span>
            <div class="name">
              在线选房
            </div>
            <div class="code-name">.icon-zaixianxuanfang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianxuangouren"></span>
            <div class="name">
              填选购人
            </div>
            <div class="code-name">.icon-tianxuangouren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-fenxiang2"></span>
            <div class="name">
              分享 2
            </div>
            <div class="code-name">.icon-a-fenxiang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baohuhaoma"></span>
            <div class="name">
              保护号码
            </div>
            <div class="code-name">.icon-baohuhaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-xiala2"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-a-xiala2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanshuguwen"></span>
            <div class="name">
              专属顾问
            </div>
            <div class="code-name">.icon-zhuanshuguwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinru"></span>
            <div class="name">
              进入
            </div>
            <div class="code-name">.icon-jinru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuang"></span>
            <div class="name">
              床
            </div>
            <div class="code-name">.icon-chuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingchechang"></span>
            <div class="name">
              停车场
            </div>
            <div class="code-name">.icon-tingchechang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxishi"></span>
            <div class="name">
              休息室
            </div>
            <div class="code-name">.icon-xiuxishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yigui"></span>
            <div class="name">
              衣柜
            </div>
            <div class="code-name">.icon-yigui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxianqu"></span>
            <div class="name">
              休闲区
            </div>
            <div class="code-name">.icon-xiuxianqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzhuo"></span>
            <div class="name">
              书桌
            </div>
            <div class="code-name">.icon-shuzhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhinengmensuo"></span>
            <div class="name">
              智能门锁
            </div>
            <div class="code-name">.icon-zhinengmensuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuandai"></span>
            <div class="name">
              宽带
            </div>
            <div class="code-name">.icon-kuandai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiantai"></span>
            <div class="name">
              前台
            </div>
            <div class="code-name">.icon-qiantai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuba"></span>
            <div class="name">
              书吧
            </div>
            <div class="code-name">.icon-shuba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiyifang"></span>
            <div class="name">
              洗衣房
            </div>
            <div class="code-name">.icon-xiyifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kongzhonghuayuan"></span>
            <div class="name">
              空中花园
            </div>
            <div class="code-name">.icon-kongzhonghuayuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianshiji"></span>
            <div class="name">
              电视机
            </div>
            <div class="code-name">.icon-dianshiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibolu"></span>
            <div class="name">
              微波炉
            </div>
            <div class="code-name">.icon-weibolu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianti"></span>
            <div class="name">
              电梯
            </div>
            <div class="code-name">.icon-dianti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianranqi"></span>
            <div class="name">
              天然气
            </div>
            <div class="code-name">.icon-tianranqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diancilu"></span>
            <div class="name">
              电磁炉
            </div>
            <div class="code-name">.icon-diancilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reshuiqi"></span>
            <div class="name">
              热水器
            </div>
            <div class="code-name">.icon-reshuiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanjiankong"></span>
            <div class="name">
              安全监控
            </div>
            <div class="code-name">.icon-anquanjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DIYcanba"></span>
            <div class="name">
              DIY餐吧
            </div>
            <div class="code-name">.icon-DIYcanba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chugui"></span>
            <div class="name">
              橱柜
            </div>
            <div class="code-name">.icon-chugui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditie"></span>
            <div class="name">
              地铁
            </div>
            <div class="code-name">.icon-ditie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyinqu"></span>
            <div class="name">
              影音区
            </div>
            <div class="code-name">.icon-yingyinqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canzhuo"></span>
            <div class="name">
              餐桌
            </div>
            <div class="code-name">.icon-canzhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chouyouyanji"></span>
            <div class="name">
              抽油烟机
            </div>
            <div class="code-name">.icon-chouyouyanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kongtiao"></span>
            <div class="name">
              空调
            </div>
            <div class="code-name">.icon-kongtiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuoqiuqu"></span>
            <div class="name">
              桌球区
            </div>
            <div class="code-name">.icon-zhuoqiuqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nuanqi"></span>
            <div class="name">
              暖气
            </div>
            <div class="code-name">.icon-nuanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shafa"></span>
            <div class="name">
              沙发
            </div>
            <div class="code-name">.icon-shafa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianshenfang"></span>
            <div class="name">
              健身房
            </div>
            <div class="code-name">.icon-jianshenfang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianlidian"></span>
            <div class="name">
              便利店
            </div>
            <div class="code-name">.icon-bianlidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huikequ"></span>
            <div class="name">
              会客区
            </div>
            <div class="code-name">.icon-huikequ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-24Hanbao"></span>
            <div class="name">
              24H安保
            </div>
            <div class="code-name">.icon-a-24Hanbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shequhuodong"></span>
            <div class="name">
              社区活动
            </div>
            <div class="code-name">.icon-shequhuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bingxiang"></span>
            <div class="name">
              冰箱
            </div>
            <div class="code-name">.icon-bingxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiyiji"></span>
            <div class="name">
              洗衣机
            </div>
            <div class="code-name">.icon-xiyiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-pausecircle"></span>
            <div class="name">
              pause circle
            </div>
            <div class="code-name">.icon-a-pausecircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canshu"></span>
            <div class="name">
              参数
            </div>
            <div class="code-name">.icon-canshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoyuyan"></span>
            <div class="name">
              多语言
            </div>
            <div class="code-name">.icon-duoyuyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mokuai"></span>
            <div class="name">
              模块
            </div>
            <div class="code-name">.icon-mokuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenhao-yuanquan"></span>
            <div class="name">
              问号-圆圈
            </div>
            <div class="code-name">.icon-wenhao-yuanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu-yuanquan"></span>
            <div class="name">
              错误-圆圈
            </div>
            <div class="code-name">.icon-cuowu-yuanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengyuan"></span>
            <div class="name">
              成员
            </div>
            <div class="code-name">.icon-chengyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianqu"></span>
            <div class="name">
              减去
            </div>
            <div class="code-name">.icon-jianqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia-dakai"></span>
            <div class="name">
              文件夹-打开
            </div>
            <div class="code-name">.icon-wenjianjia-dakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biyan"></span>
            <div class="name">
              闭眼
            </div>
            <div class="code-name">.icon-biyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangjianduihua"></span>
            <div class="name">
              创建对话
            </div>
            <div class="code-name">.icon-chuangjianduihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaojijisuan"></span>
            <div class="name">
              超级计算
            </div>
            <div class="code-name">.icon-chaojijisuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenhao"></span>
            <div class="name">
              问好
            </div>
            <div class="code-name">.icon-wenhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaojigongneng"></span>
            <div class="name">
              高级功能
            </div>
            <div class="code-name">.icon-gaojigongneng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaosuanshili"></span>
            <div class="name">
              超算实例
            </div>
            <div class="code-name">.icon-chaosuanshili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenbushi"></span>
            <div class="name">
              分布式
            </div>
            <div class="code-name">.icon-fenbushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianshao-yuanquan"></span>
            <div class="name">
              减少-圆圈
            </div>
            <div class="code-name">.icon-jianshao-yuanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanghuxiaoguoyanzheng"></span>
            <div class="name">
              防护效果验证
            </div>
            <div class="code-name">.icon-fanghuxiaoguoyanzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingzhiluojinshu"></span>
            <div class="name">
              定制裸金属
            </div>
            <div class="code-name">.icon-dingzhiluojinshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangluo"></span>
            <div class="name">
              网络
            </div>
            <div class="code-name">.icon-wangluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fujian"></span>
            <div class="name">
              附件
            </div>
            <div class="code-name">.icon-fujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiandao"></span>
            <div class="name">
              剪刀
            </div>
            <div class="code-name">.icon-jiandao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhang"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-qiehuan2"></span>
            <div class="name">
              切换 2
            </div>
            <div class="code-name">.icon-a-qiehuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuwu"></span>
            <div class="name">
              服务
            </div>
            <div class="code-name">.icon-fuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanghujilu"></span>
            <div class="name">
              防护记录
            </div>
            <div class="code-name">.icon-fanghujilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-fasong2"></span>
            <div class="name">
              发送 2
            </div>
            <div class="code-name">.icon-a-fasong2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-wendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-renyuanzhanghaoguanli"></span>
            <div class="name">
              人员、账号管理
            </div>
            <div class="code-name">.icon-a-renyuanzhanghaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingcangku"></span>
            <div class="name">
              模型仓库
            </div>
            <div class="code-name">.icon-moxingcangku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.icon-rili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuanbiaoge"></span>
            <div class="name">
              切换表格
            </div>
            <div class="code-name">.icon-qiehuanbiaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifeishuoming"></span>
            <div class="name">
              计费说明
            </div>
            <div class="code-name">.icon-jifeishuoming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuanguanli"></span>
            <div class="name">
              人员管理
            </div>
            <div class="code-name">.icon-renyuanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingweitiao"></span>
            <div class="name">
              模型微调
            </div>
            <div class="code-name">.icon-moxingweitiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saomiao"></span>
            <div class="name">
              扫描
            </div>
            <div class="code-name">.icon-saomiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenglvehao"></span>
            <div class="name">
              省略号
            </div>
            <div class="code-name">.icon-shenglvehao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiyong"></span>
            <div class="name">
              费用
            </div>
            <div class="code-name">.icon-feiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia-yuanquan"></span>
            <div class="name">
              添加-圆圈
            </div>
            <div class="code-name">.icon-tianjia-yuanquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paixu"></span>
            <div class="name">
              排序
            </div>
            <div class="code-name">.icon-paixu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paizhao"></span>
            <div class="name">
              拍照
            </div>
            <div class="code-name">.icon-paizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuji"></span>
            <div class="name">
              数据集
            </div>
            <div class="code-name">.icon-shujuji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loudou"></span>
            <div class="name">
              漏斗
            </div>
            <div class="code-name">.icon-loudou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaifaji"></span>
            <div class="name">
              开发机
            </div>
            <div class="code-name">.icon-kaifaji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shili"></span>
            <div class="name">
              实例
            </div>
            <div class="code-name">.icon-shili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ding"></span>
            <div class="name">
              钉
            </div>
            <div class="code-name">.icon-ding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-tongzhi2"></span>
            <div class="name">
              通知 2
            </div>
            <div class="code-name">.icon-a-tongzhi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingfuwu"></span>
            <div class="name">
              模型服务
            </div>
            <div class="code-name">.icon-moxingfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luojinshu"></span>
            <div class="name">
              裸金属
            </div>
            <div class="code-name">.icon-luojinshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunlianrenwu"></span>
            <div class="name">
              训练任务
            </div>
            <div class="code-name">.icon-xunlianrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiyongshouce"></span>
            <div class="name">
              使用手册
            </div>
            <div class="code-name">.icon-shiyongshouce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongyongjisuan"></span>
            <div class="name">
              通用计算
            </div>
            <div class="code-name">.icon-tongyongjisuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youce"></span>
            <div class="name">
              右侧
            </div>
            <div class="code-name">.icon-youce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wailian"></span>
            <div class="name">
              外链
            </div>
            <div class="code-name">.icon-wailian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxingxunlian"></span>
            <div class="name">
              模型训练
            </div>
            <div class="code-name">.icon-moxingxunlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoduanqiehuan"></span>
            <div class="name">
              多端切换
            </div>
            <div class="code-name">.icon-duoduanqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuankapian"></span>
            <div class="name">
              切换卡片
            </div>
            <div class="code-name">.icon-qiehuankapian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moxinggongju"></span>
            <div class="name">
              模型工具
            </div>
            <div class="code-name">.icon-moxinggongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiaozhongxin"></span>
            <div class="name">
              营销中心
            </div>
            <div class="code-name">.icon-yingxiaozhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liuliangtiaodu"></span>
            <div class="name">
              流量调度
            </div>
            <div class="code-name">.icon-liuliangtiaodu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peie"></span>
            <div class="name">
              配额
            </div>
            <div class="code-name">.icon-peie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suanliyunying"></span>
            <div class="name">
              算力运营
            </div>
            <div class="code-name">.icon-suanliyunying
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaosuanxietong"></span>
            <div class="name">
              超算协同
            </div>
            <div class="code-name">.icon-chaosuanxietong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunyingpan"></span>
            <div class="name">
              云硬盘
            </div>
            <div class="code-name">.icon-yunyingpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujugongju"></span>
            <div class="name">
              数据工具
            </div>
            <div class="code-name">.icon-shujugongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuxingzhuomian"></span>
            <div class="name">
              图形桌面
            </div>
            <div class="code-name">.icon-tuxingzhuomian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-geren"></use>
                </svg>
                <div class="name">个人</div>
                <div class="code-name">#icon-geren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-offical"></use>
                </svg>
                <div class="name">offical</div>
                <div class="code-name">#icon-offical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luyin"></use>
                </svg>
                <div class="name">录音</div>
                <div class="code-name">#icon-luyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuping"></use>
                </svg>
                <div class="name">竖屏</div>
                <div class="code-name">#icon-shuping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_hengpingqiehuan_hengpingqiehuan"></use>
                </svg>
                <div class="name">icon_横屏切换_横屏切换</div>
                <div class="code-name">#icon-icon_hengpingqiehuan_hengpingqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test5"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-icon-test5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test6"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-icon-test6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test7"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-icon-test7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test8"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#icon-icon-test8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test9"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-icon-test9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test10"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-icon-test10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test11"></use>
                </svg>
                <div class="name">like_filled</div>
                <div class="code-name">#icon-icon-test11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test12"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#icon-icon-test12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test13"></use>
                </svg>
                <div class="name">star_filled</div>
                <div class="code-name">#icon-icon-test13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <div class="name">message_unread</div>
                <div class="code-name">#icon-icon-test1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test2"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-icon-test2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test3"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-icon-test3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test4"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-icon-test4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jubao"></use>
                </svg>
                <div class="name">举报</div>
                <div class="code-name">#icon-jubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanbaozhang"></use>
                </svg>
                <div class="name">安全保障</div>
                <div class="code-name">#icon-anquanbaozhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi-zhihui"></use>
                </svg>
                <div class="name">消息-置灰</div>
                <div class="code-name">#icon-xiaoxi-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-zhihui"></use>
                </svg>
                <div class="name">首页-置灰</div>
                <div class="code-name">#icon-shouye-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin-zhihui"></use>
                </svg>
                <div class="name">个人中心-置灰</div>
                <div class="code-name">#icon-gerenzhongxin-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kandian-zhihui"></use>
                </svg>
                <div class="name">看点-置灰</div>
                <div class="code-name">#icon-kandian-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaijiezhifu"></use>
                </svg>
                <div class="name">快捷支付</div>
                <div class="code-name">#icon-kuaijiezhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifudingjin"></use>
                </svg>
                <div class="name">支付订金</div>
                <div class="code-name">#icon-zhifudingjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaitongfuwu"></use>
                </svg>
                <div class="name">开通服务</div>
                <div class="code-name">#icon-kaitongfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianshuxieyi"></use>
                </svg>
                <div class="name">签署协议</div>
                <div class="code-name">#icon-qianshuxieyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-dianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanzhu-zhihui"></use>
                </svg>
                <div class="name">关注-置灰</div>
                <div class="code-name">#icon-guanzhu-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tijiaoyanzi"></use>
                </svg>
                <div class="name">提交验资</div>
                <div class="code-name">#icon-tijiaoyanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-dingwei2"></use>
                </svg>
                <div class="name">定位 2</div>
                <div class="code-name">#icon-a-dingwei2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanruzijin"></use>
                </svg>
                <div class="name">转入资金</div>
                <div class="code-name">#icon-zhuanruzijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanziwancheng"></use>
                </svg>
                <div class="name">验资完成</div>
                <div class="code-name">#icon-yanziwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang1"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianyanzi"></use>
                </svg>
                <div class="name">在线验资</div>
                <div class="code-name">#icon-zaixianyanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuantupian"></use>
                </svg>
                <div class="name">上传图片</div>
                <div class="code-name">#icon-shangchuantupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianxuanfang"></use>
                </svg>
                <div class="name">在线选房</div>
                <div class="code-name">#icon-zaixianxuanfang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianxuangouren"></use>
                </svg>
                <div class="name">填选购人</div>
                <div class="code-name">#icon-tianxuangouren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-fenxiang2"></use>
                </svg>
                <div class="name">分享 2</div>
                <div class="code-name">#icon-a-fenxiang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baohuhaoma"></use>
                </svg>
                <div class="name">保护号码</div>
                <div class="code-name">#icon-baohuhaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-xiala2"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-a-xiala2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanshuguwen"></use>
                </svg>
                <div class="name">专属顾问</div>
                <div class="code-name">#icon-zhuanshuguwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinru"></use>
                </svg>
                <div class="name">进入</div>
                <div class="code-name">#icon-jinru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuang"></use>
                </svg>
                <div class="name">床</div>
                <div class="code-name">#icon-chuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingchechang"></use>
                </svg>
                <div class="name">停车场</div>
                <div class="code-name">#icon-tingchechang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxishi"></use>
                </svg>
                <div class="name">休息室</div>
                <div class="code-name">#icon-xiuxishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yigui"></use>
                </svg>
                <div class="name">衣柜</div>
                <div class="code-name">#icon-yigui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxianqu"></use>
                </svg>
                <div class="name">休闲区</div>
                <div class="code-name">#icon-xiuxianqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzhuo"></use>
                </svg>
                <div class="name">书桌</div>
                <div class="code-name">#icon-shuzhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhinengmensuo"></use>
                </svg>
                <div class="name">智能门锁</div>
                <div class="code-name">#icon-zhinengmensuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuandai"></use>
                </svg>
                <div class="name">宽带</div>
                <div class="code-name">#icon-kuandai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiantai"></use>
                </svg>
                <div class="name">前台</div>
                <div class="code-name">#icon-qiantai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuba"></use>
                </svg>
                <div class="name">书吧</div>
                <div class="code-name">#icon-shuba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiyifang"></use>
                </svg>
                <div class="name">洗衣房</div>
                <div class="code-name">#icon-xiyifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongzhonghuayuan"></use>
                </svg>
                <div class="name">空中花园</div>
                <div class="code-name">#icon-kongzhonghuayuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianshiji"></use>
                </svg>
                <div class="name">电视机</div>
                <div class="code-name">#icon-dianshiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibolu"></use>
                </svg>
                <div class="name">微波炉</div>
                <div class="code-name">#icon-weibolu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianti"></use>
                </svg>
                <div class="name">电梯</div>
                <div class="code-name">#icon-dianti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianranqi"></use>
                </svg>
                <div class="name">天然气</div>
                <div class="code-name">#icon-tianranqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diancilu"></use>
                </svg>
                <div class="name">电磁炉</div>
                <div class="code-name">#icon-diancilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reshuiqi"></use>
                </svg>
                <div class="name">热水器</div>
                <div class="code-name">#icon-reshuiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanjiankong"></use>
                </svg>
                <div class="name">安全监控</div>
                <div class="code-name">#icon-anquanjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DIYcanba"></use>
                </svg>
                <div class="name">DIY餐吧</div>
                <div class="code-name">#icon-DIYcanba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chugui"></use>
                </svg>
                <div class="name">橱柜</div>
                <div class="code-name">#icon-chugui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditie"></use>
                </svg>
                <div class="name">地铁</div>
                <div class="code-name">#icon-ditie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyinqu"></use>
                </svg>
                <div class="name">影音区</div>
                <div class="code-name">#icon-yingyinqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canzhuo"></use>
                </svg>
                <div class="name">餐桌</div>
                <div class="code-name">#icon-canzhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chouyouyanji"></use>
                </svg>
                <div class="name">抽油烟机</div>
                <div class="code-name">#icon-chouyouyanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongtiao"></use>
                </svg>
                <div class="name">空调</div>
                <div class="code-name">#icon-kongtiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuoqiuqu"></use>
                </svg>
                <div class="name">桌球区</div>
                <div class="code-name">#icon-zhuoqiuqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nuanqi"></use>
                </svg>
                <div class="name">暖气</div>
                <div class="code-name">#icon-nuanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shafa"></use>
                </svg>
                <div class="name">沙发</div>
                <div class="code-name">#icon-shafa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianshenfang"></use>
                </svg>
                <div class="name">健身房</div>
                <div class="code-name">#icon-jianshenfang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianlidian"></use>
                </svg>
                <div class="name">便利店</div>
                <div class="code-name">#icon-bianlidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huikequ"></use>
                </svg>
                <div class="name">会客区</div>
                <div class="code-name">#icon-huikequ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-24Hanbao"></use>
                </svg>
                <div class="name">24H安保</div>
                <div class="code-name">#icon-a-24Hanbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shequhuodong"></use>
                </svg>
                <div class="name">社区活动</div>
                <div class="code-name">#icon-shequhuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bingxiang"></use>
                </svg>
                <div class="name">冰箱</div>
                <div class="code-name">#icon-bingxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiyiji"></use>
                </svg>
                <div class="name">洗衣机</div>
                <div class="code-name">#icon-xiyiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-pausecircle"></use>
                </svg>
                <div class="name">pause circle</div>
                <div class="code-name">#icon-a-pausecircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canshu"></use>
                </svg>
                <div class="name">参数</div>
                <div class="code-name">#icon-canshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoyuyan"></use>
                </svg>
                <div class="name">多语言</div>
                <div class="code-name">#icon-duoyuyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mokuai"></use>
                </svg>
                <div class="name">模块</div>
                <div class="code-name">#icon-mokuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenhao-yuanquan"></use>
                </svg>
                <div class="name">问号-圆圈</div>
                <div class="code-name">#icon-wenhao-yuanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu-yuanquan"></use>
                </svg>
                <div class="name">错误-圆圈</div>
                <div class="code-name">#icon-cuowu-yuanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengyuan"></use>
                </svg>
                <div class="name">成员</div>
                <div class="code-name">#icon-chengyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianqu"></use>
                </svg>
                <div class="name">减去</div>
                <div class="code-name">#icon-jianqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia-dakai"></use>
                </svg>
                <div class="name">文件夹-打开</div>
                <div class="code-name">#icon-wenjianjia-dakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biyan"></use>
                </svg>
                <div class="name">闭眼</div>
                <div class="code-name">#icon-biyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangjianduihua"></use>
                </svg>
                <div class="name">创建对话</div>
                <div class="code-name">#icon-chuangjianduihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaojijisuan"></use>
                </svg>
                <div class="name">超级计算</div>
                <div class="code-name">#icon-chaojijisuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenhao"></use>
                </svg>
                <div class="name">问好</div>
                <div class="code-name">#icon-wenhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaojigongneng"></use>
                </svg>
                <div class="name">高级功能</div>
                <div class="code-name">#icon-gaojigongneng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaosuanshili"></use>
                </svg>
                <div class="name">超算实例</div>
                <div class="code-name">#icon-chaosuanshili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenbushi"></use>
                </svg>
                <div class="name">分布式</div>
                <div class="code-name">#icon-fenbushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianshao-yuanquan"></use>
                </svg>
                <div class="name">减少-圆圈</div>
                <div class="code-name">#icon-jianshao-yuanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanghuxiaoguoyanzheng"></use>
                </svg>
                <div class="name">防护效果验证</div>
                <div class="code-name">#icon-fanghuxiaoguoyanzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingzhiluojinshu"></use>
                </svg>
                <div class="name">定制裸金属</div>
                <div class="code-name">#icon-dingzhiluojinshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangluo"></use>
                </svg>
                <div class="name">网络</div>
                <div class="code-name">#icon-wangluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujian"></use>
                </svg>
                <div class="name">附件</div>
                <div class="code-name">#icon-fujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiandao"></use>
                </svg>
                <div class="name">剪刀</div>
                <div class="code-name">#icon-jiandao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-qiehuan2"></use>
                </svg>
                <div class="name">切换 2</div>
                <div class="code-name">#icon-a-qiehuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuwu"></use>
                </svg>
                <div class="name">服务</div>
                <div class="code-name">#icon-fuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanghujilu"></use>
                </svg>
                <div class="name">防护记录</div>
                <div class="code-name">#icon-fanghujilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-fasong2"></use>
                </svg>
                <div class="name">发送 2</div>
                <div class="code-name">#icon-a-fasong2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-wendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-renyuanzhanghaoguanli"></use>
                </svg>
                <div class="name">人员、账号管理</div>
                <div class="code-name">#icon-a-renyuanzhanghaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingcangku"></use>
                </svg>
                <div class="name">模型仓库</div>
                <div class="code-name">#icon-moxingcangku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#icon-rili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuanbiaoge"></use>
                </svg>
                <div class="name">切换表格</div>
                <div class="code-name">#icon-qiehuanbiaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifeishuoming"></use>
                </svg>
                <div class="name">计费说明</div>
                <div class="code-name">#icon-jifeishuoming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuanguanli"></use>
                </svg>
                <div class="name">人员管理</div>
                <div class="code-name">#icon-renyuanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingweitiao"></use>
                </svg>
                <div class="name">模型微调</div>
                <div class="code-name">#icon-moxingweitiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saomiao"></use>
                </svg>
                <div class="name">扫描</div>
                <div class="code-name">#icon-saomiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenglvehao"></use>
                </svg>
                <div class="name">省略号</div>
                <div class="code-name">#icon-shenglvehao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiyong"></use>
                </svg>
                <div class="name">费用</div>
                <div class="code-name">#icon-feiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia-yuanquan"></use>
                </svg>
                <div class="name">添加-圆圈</div>
                <div class="code-name">#icon-tianjia-yuanquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paixu"></use>
                </svg>
                <div class="name">排序</div>
                <div class="code-name">#icon-paixu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paizhao"></use>
                </svg>
                <div class="name">拍照</div>
                <div class="code-name">#icon-paizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuji"></use>
                </svg>
                <div class="name">数据集</div>
                <div class="code-name">#icon-shujuji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loudou"></use>
                </svg>
                <div class="name">漏斗</div>
                <div class="code-name">#icon-loudou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaifaji"></use>
                </svg>
                <div class="name">开发机</div>
                <div class="code-name">#icon-kaifaji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shili"></use>
                </svg>
                <div class="name">实例</div>
                <div class="code-name">#icon-shili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ding"></use>
                </svg>
                <div class="name">钉</div>
                <div class="code-name">#icon-ding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-tongzhi2"></use>
                </svg>
                <div class="name">通知 2</div>
                <div class="code-name">#icon-a-tongzhi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingfuwu"></use>
                </svg>
                <div class="name">模型服务</div>
                <div class="code-name">#icon-moxingfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luojinshu"></use>
                </svg>
                <div class="name">裸金属</div>
                <div class="code-name">#icon-luojinshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunlianrenwu"></use>
                </svg>
                <div class="name">训练任务</div>
                <div class="code-name">#icon-xunlianrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiyongshouce"></use>
                </svg>
                <div class="name">使用手册</div>
                <div class="code-name">#icon-shiyongshouce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongyongjisuan"></use>
                </svg>
                <div class="name">通用计算</div>
                <div class="code-name">#icon-tongyongjisuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youce"></use>
                </svg>
                <div class="name">右侧</div>
                <div class="code-name">#icon-youce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wailian"></use>
                </svg>
                <div class="name">外链</div>
                <div class="code-name">#icon-wailian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxingxunlian"></use>
                </svg>
                <div class="name">模型训练</div>
                <div class="code-name">#icon-moxingxunlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoduanqiehuan"></use>
                </svg>
                <div class="name">多端切换</div>
                <div class="code-name">#icon-duoduanqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuankapian"></use>
                </svg>
                <div class="name">切换卡片</div>
                <div class="code-name">#icon-qiehuankapian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moxinggongju"></use>
                </svg>
                <div class="name">模型工具</div>
                <div class="code-name">#icon-moxinggongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiaozhongxin"></use>
                </svg>
                <div class="name">营销中心</div>
                <div class="code-name">#icon-yingxiaozhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liuliangtiaodu"></use>
                </svg>
                <div class="name">流量调度</div>
                <div class="code-name">#icon-liuliangtiaodu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peie"></use>
                </svg>
                <div class="name">配额</div>
                <div class="code-name">#icon-peie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suanliyunying"></use>
                </svg>
                <div class="name">算力运营</div>
                <div class="code-name">#icon-suanliyunying</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaosuanxietong"></use>
                </svg>
                <div class="name">超算协同</div>
                <div class="code-name">#icon-chaosuanxietong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunyingpan"></use>
                </svg>
                <div class="name">云硬盘</div>
                <div class="code-name">#icon-yunyingpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujugongju"></use>
                </svg>
                <div class="name">数据工具</div>
                <div class="code-name">#icon-shujugongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuxingzhuomian"></use>
                </svg>
                <div class="name">图形桌面</div>
                <div class="code-name">#icon-tuxingzhuomian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
